import { Image, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import './index.scss';

const AdvertRecommend = ({ imgStyle, advertList, goTxt, onClick }) => {
  if (!advertList?.length) {
    return null;
  }

  const handleClick = () => {
    if (onClick) {
      onClick();
      return;
    }

    Taro.navigateTo({ url: advertList[0].url });
  };

  return (
    <View className="AdvertRecommend">
      <View className="big-img" style={imgStyle}>
        <Image style={{ width: '100%', height: '100%' }} src={advertList[0].imageUrl} />
      </View>

      <View className="advert-recommend-title">{advertList[0].title}</View>

      <View className="detail">
        <View className="subtitle">{advertList[0].subtitle}</View>

        <View className="go-btn customePageBackgroundStyle" onClick={handleClick}>
          <View className="go-btn-txt">{goTxt}</View>
        </View>
      </View>
    </View>
  );
};

export default AdvertRecommend;
